import {computed} from "vue"

import {buttonProps,ButtonEmits} from "./botton"
import type{SetupContext} from "vue"

export const useButton = (props:any,emit:SetupContext<ButtonEmits>['emit'])=>{

    const handClick = (evt:MouseEvent)=>{
        // console.log(evt,"mouseEvent")
        emit("click",evt)
    }

    // 判断是否是自定义的color
let isColor = computed<boolean>(() => {
    // return props.color
    return props?.color ? true : false
})

//判断要选泽什么类型
let cssType = computed<string|undefined>(() => {
    if (!isColor.value) {
        return props?.plain ? `plain-${props?.type}` : props?.type
    } else {
        return props?.plain ? 'plain-other' : "other"
    }
})

//以对象的形式返回样式

let objTypeStyle = computed<Array<any>>(() => {
    return [
     props['circle']?'circle':'',
     props['round']?'round':'',
     props['disabled']?"disabled":"",
     props['loading']?'loading':'',
    ].filter(item=>item!="")
})

// 样式汇总
let styleArr= computed(()=>{
    return [cssType.value,...objTypeStyle.value, props['size']?props['size']:'']
})

    return {
        handClick,
        styleArr
    }
}